{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">
<link href="/static/laydate/theme/default/laydate.css">
{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">企业</label>
                                <div class="col-sm-3">
                                    <select name="user_id">
                                        <option value="0">请选择企业</option>
                                        {volist name="user_list" id="vo"}
                                        <option value="{$vo.id}" {$vo.id == $info.user_id ? 'selected' : ''}>{$vo.company_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">项目名称</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="name" value="{$info.name}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">活动适用对象</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="applicable_objects" value="{$info.applicable_objects}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">项目负责人姓名</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="head_name" value="{$info.head_name}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">项目负责人电话</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="head_mobile" value="{$info.head_mobile}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">结束时间</label>
                                <div class="col-sm-3">
                                    <input placeholder="请选择结束时间" name="end_time" value="{$info.end_time ? date('Y-m-d', $info.end_time) : ''}" type="text" class="form-control form-control-lg end-date" readonly>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">地址</label>
                                <div class="col-lg-3">
                                    <input type="text" class="form-control" name="address" value="{$info.address}">
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">简介</label>
                                <div class="col-lg-3">
                                    <textarea class="form-control" name="content" rows="8">{$info.content}</textarea>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">上下线</label>
                                <div class="col-lg-3">
                                    <input type="radio" name="is_online" value="1" title="上线" {$info.is_online != 2 ? 'checked' : ''}>
                                    <input type="radio" name="is_online" value="2" title="下线" {$info.is_online == 2 ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">申报资料上传</label>
                                <div class="col-sm-3">
                                    <input type="file" id="upload_file" accept=".doc,.docx" style="display: none">
                                    <input type="hidden" name="file_ids" id="file" value="{$info['file_ids']|default=''}"/>
                                    <div class="btn btn-primary btn-lg" id="up_btn">上传文件</div>
                                </div>
                            </div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-3">
                                    <style>
                                        #file-list .box {
                                            display: flex;
                                            align-items: center;
                                        }

                                        #file-list .box div {
                                            margin: 20px;
                                            width: 200px;
                                        }
                                    </style>
                                    <div id="file-list"></div>
                                    <input type="hidden" class="file_ids" name="file_ids" value="{$info.file_ids}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">岗位</label>
                                <div class="col-sm-10">
                                    <div class="btn btn-primary btn-lg" data-toggle="modal" data-target="#post-form">新增岗位</div>
                                    <table class="table table-striped">
                                        <thead>
                                        <tr>
                                            <th>岗位名称</th>
                                            <th>报名上限</th>
                                            <th>辅导员</th>
                                            <th>体验时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="post_list"></tbody>
                                        <textarea name="post_list" class="post_list" style="display: none"></textarea>
                                    </table>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="textarea" name="id" value="{$post_list_json}" style="display: none">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="post-form" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated flipInY">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">岗位信息</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control name" placeholder="请输入岗位名称">
                    <input type="number" class="form-control max_count" placeholder="请输入报名上限" style="margin-top: 10px">
                    <input type="text" class="form-control counsellor_name" placeholder="请输入辅导员姓名" style="margin-top: 10px">
                    <input type="text" class="form-control counsellor_unit" placeholder="请输入辅导员岗位" style="margin-top: 10px">
                    <textarea class="form-control time" name="time" rows="4" placeholder="请输入体验时间" style="margin-top: 10px"></textarea>
                    <input type="hidden" class="id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white close-model" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="confirmDoPost" aria-hidden="true">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}{include file="public/preview-img-mask" swiper-id="cropper-preview" /}{/block}{block name='js'}
<script src="/static/laydate/laydate.js"></script>
<script src="__STATIC__/layui/layui.js"></script>

<script>
    laydate.render({
        elem: '.end-date' //指定元素
    });

    var is_insert_post = true;
    var edit_index = 0;
    var post_list = `{$post_list}` ? {$post_list} : [];
    if(post_list.length > 0){
        renderPostList();
    }

    $('#confirmDoPost').click(function () {
        var name = $('#post-form .name').val(),
          max_count = $('#post-form .max_count').val(),
          counsellor_name = $('#post-form .counsellor_name').val(),
          counsellor_unit = $('#post-form .counsellor_unit').val(),
          time = $('#post-form .time').val(),
          id = $('#post-form .id').val() ? $('#post-form .id').val() : 0;

        if (!name) {
            layer.msg('请输入岗位名称', {icon: 2});
            return;
        }
        if (!max_count) {
            layer.msg('请输入报名上限', {icon: 2});
            return;
        }
        if (!counsellor_name) {
            layer.msg('请输入辅导员姓名', {icon: 2});
            return;
        }
        if (!counsellor_unit) {
            layer.msg('请输入辅导员岗位', {icon: 2});
            return;
        }
        if (!time) {
            layer.msg('请输入体验时间', {icon: 2});
            return;
        }

        var post = {
            id, name, max_count, counsellor_name, counsellor_unit, time
        };

        if (is_insert_post) {
            post_list.push(post);
        } else {
            post_list[edit_index] = post;

            is_insert_post = true;
        }

        renderPostList();

        $('#post-form').find('input').val('');
        $('#post-form').find('textarea').val('');

        $(".close-model").trigger("click");
    })

    function editPost(index) {
        is_insert_post = false
        edit_index = index;

        var {id, name, max_count, counsellor_name, counsellor_unit, time} = post_list[index];

        $('#post-form .name').val(name)
        $('#post-form .max_count').val(max_count)
        $('#post-form .counsellor_name').val(counsellor_name)
        $('#post-form .counsellor_unit').val(counsellor_unit)
        $('#post-form .time').val(time)
        $('#post-form .id').val(id)
    }

    function delPost(index) {
        post_list.splice(index, 1)
        renderPostList();
    }

    function renderPostList() {
        var html = '';
        post_list.forEach((val, key) => {
            var {name, max_count, counsellor_name, counsellor_unit, time} = val;
            html += `<tr>
                        <td>${name}</td>
                        <td>${max_count}</td>
                        <td>${counsellor_name} ${counsellor_unit}</td>
                        <td>${time}</td>
                        <td>
                            <a href="javascript: void(0)" onclick="editPost(${key})" class="btn btn-white btn-sm" data-toggle="modal" data-target="#post-form"><i class="iconfont icon-edit"></i> 编辑</a>
                            <a href="javascript: void(0)" onclick="delPost(${key})" class="btn btn-white btn-sm"><i class="iconfont icon-trash"></i> 删除 </a>
                        </td>
                    </tr>`
        })
        $('#post_list').html(html);

        $('.post_list').val(JSON.stringify(post_list))

    }

    var file_list = `{$file_list}` ? JSON.parse(`{$file_list}`) : [];
    if (file_list) {
        renderFileList()
    }

    $('#up_btn').click(function () {
        $('#upload_file').trigger('click')
        $('#upload_file').change(function () {
            var pic = $(this)[0].files[0];
            var formData = new FormData();
            var url = "/Upload/UploadFile/uploadFile";
            var name = pic['name'];

            formData.append('download', pic);
            formData.append('name', name);

            $.ajax({
                url: url,
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.status == 1) {
                        clearFile('upload_file');

                        //上传成功
                        var id = data.data.id;// file表主键id
                        var name = removeFileExtension(data.data.name);

                        var file = {id, name}
                        file_list.push(file);
                        renderFileList()
                    } else {
                        layer.msg(data.info);
                    }
                }
            })
        })
    })

    function delFile(index) {
        file_list.splice(index, 1);
        renderFileList();
    }

    function renderFileList() {
        var html = '';
        var file_ids = '';
        file_list.forEach((val, key) => {
            var {id, name} = val;
            html += `<div class="box">
                        <div>${name}</div>
                        <a href="javascript: void(0)" onclick="delFile(${key})" class="btn btn-white btn-sm"><i class="iconfont icon-trash"></i> 删除
                        </a>
                    </div>`

            if (file_ids) {
                file_ids += ',' + id;
            } else {
                file_ids = id;
            }
        })

        $('#file-list').html(html);
        $('.file_ids').val(file_ids);
    }

    function removeFileExtension(filename) {
        // 找到最后一个点的位置
        var lastDotPosition = filename.lastIndexOf('.');
        // 如果没有点，返回原始文件名
        if (lastDotPosition === -1) return filename;
        // 截取从开头到最后一个点之前的部分
        return filename.substring(0, lastDotPosition);
    }


</script>{/block}
